import React from "react";
import {Badge, Card, Col, Row, Tag, Tooltip} from "antd";
import {Meta} from "antd/es/list/Item";
import PropTypes from "prop-types";
import {BottomNode, CardBox} from "@/common/Card/style";
import Config from "@/config";
import {StaticArray} from "@/util/global";
import moment from "moment";
import QueueAnim from "rc-queue-anim";
import {DeepFontColor, FontBackgroundColor, LightFontColor} from "@/style/Color";

const JCard = (props) => {
    let {
        photo,
        video,
        width,
        height,
        title,
        description,
        viewCount,
        style,
        onClick,
        topNode,
        bottomNode,
        cover,
        info
    } = props

    /* 上节点 */
    function doTopNode(array) {
        return <Row gutter={[10, 0]}>
            {
                array && array.length > 0 ?
                    array.map(item => {
                        return <Col key={item} style={{maxWidth: '35%', transform: 'scale(0.85)'}}>
                            <div style={{fontSize: '15px', color: DeepFontColor}}>
                                <Tag icon={<Config.IconFont type={StaticArray[item].iconType}
                                                            style={{fontSize: '14px'}}/>}
                                     color={StaticArray[item].color} style={{borderRadius: '3px'}}>
                                    {item}
                                </Tag>
                            </div>
                        </Col>
                    })
                    :
                    null
            }
        </Row>
    }


    /* 下节点 */
    function doBottomNode(info) {
        return <>
            <Row gutter={[0, 8]} style={{fontSize: '12px', backgroundColor: FontBackgroundColor}}>
                <Col span={12}>
                    <Tag
                        icon={<Config.IconFont type={'icon-yanjing'} style={{fontSize: '12px', color: DeepFontColor}}/>}
                        color={FontBackgroundColor}>
                        <span style={{
                            fontSize: '12px',
                            color: DeepFontColor,
                            lineHeight: '22px'
                        }}>{info.viewCount ? parseInt(info.viewCount) <= 99999 ? info.viewCount : "99999+" : "暂无"}</span>
                    </Tag>
                </Col>
                <Col span={12} style={{textAlign: 'right', paddingRight: '3px'}}>
                    <Badge color="lime" text={
                        <Tooltip placement="bottom" color={"#ffffff"}
                                 title={<span style={{fontSize: '12px', color: DeepFontColor}}>上传日期</span>}>
                         <span style={{fontSize: '12px', color: '#b8b8b8'}}>
                             {moment(info.createDate, "YYYY-MM-DD").fromNow()}
                         </span>
                        </Tooltip>
                    }/>
                </Col>
            </Row>
        </>
    }


    /* COVER */
    function doCover(info) {
        var tag = null;
        /* 会员免费 */
        if (info.cost === 0) {
            tag = <Tag key={info.id + 'isVipFree'}
                       style={{position: 'absolute', top: '2px', left: '2px', width: 'auto', borderRadius: '3px'}}
                       color={"#52c41a"}
            >
                免费
            </Tag>;
        } else if (info.isVip && info.cost !== 0) {
            tag = <Tag key={info.id + 'isVipFree'}
                       style={{position: 'absolute', top: '2px', left: '2px', width: 'auto', borderRadius: '3px'}}
                       color={"#ff8467"} icon={<Config.IconFont type={'icon-huiyuan'} style={{fontSize: '15px'}}/>}
            >
                会员免费
            </Tag>;
        }
        return <>
            <img alt="暂无图片" src={info.image} style={{width: '100%', height: '160px', borderRadius: '3px 3px 0 0'}}/>
            {tag}
        </>
    }

    if (info) {
        try {
            topNode = topNode ? topNode : doTopNode(info.platforms);
            bottomNode = bottomNode ? bottomNode : doBottomNode(info);
            cover = cover ? cover : doCover(info);
        } catch (e) {
            console.log(e)
        }
    }


    return <CardBox>
        <QueueAnim type="left" ease="easeOutQuart" leaveReverse>
            <Card
                hoverable
                onClick={onClick}
                style={{
                    width,
                    height,
                    borderRadius: '3px', ...style,
                    border: `1px solid ${FontBackgroundColor}`,
                    backgroundColor: FontBackgroundColor
                }}
                cover={cover ? cover :
                    <img alt="暂无图片" src={photo} style={{width: '100%', height: '160px', borderRadius: '3px 3px 0 0'}}/>}
                bodyStyle={{padding: '10px 5px 40px 5px', backgroundColor: FontBackgroundColor, color: DeepFontColor}}
            >
                <Row gutter={[32, 5]}>
                    <Col span={24}>
                        {topNode}
                    </Col>
                    <Col span={24}>
                        <Meta title={<span style={{color: LightFontColor, fontWeight: 600}}>{title}</span>}
                              description={<span
                                  style={{fontSize: '13px', color: DeepFontColor}}>{description}</span>}/>
                    </Col>
                </Row>
                {
                    bottomNode ?
                        <BottomNode> {bottomNode}</BottomNode>
                        :
                        null
                }
            </Card>
        </QueueAnim>
    </CardBox>

}
JCard.propTypes = {
    cover: PropTypes.node,
    topNode: PropTypes.node,
    bottomNode: PropTypes.node,
    photo: PropTypes.string,
    video: PropTypes.string,
    width: PropTypes.string,
    height: PropTypes.string,
    title: PropTypes.string,
    description: PropTypes.string
}
JCard.defaultProps = {
    width: '100%',
    height: '300px'
}
export default JCard;
